import router from '@/router';

<script src="@/assets/js/HomeView.js" />

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-button
          class="handle-button"
          @click="toggleCollapse"
          style="margin-bottom: 20px"
          :icon="isCollapse ? 'Expand' : 'Fold'"
        >
        </el-button>
        <h2 class="title" @click="reload">基于代码变更的精准化代码测试系统</h2>
        <div class="avatar">
          <span v-if="user">
            <img :src="user.avatarPath" alt="用户头像" class="avatar-image" />
          </span>
          <span v-else>加载中</span>
        </div>
      </el-header>
      <el-container>
        <el-aside>
          <el-menu
            :default-active="activeIndex"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            @Select="handleSelect"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-menu-item index="1">
              <el-icon><Files /></el-icon>
              <template #title>项目管理</template>
            </el-menu-item>
            <el-menu-item index="2">
              <el-icon><icon-menu /></el-icon>
              <template #title>依赖关系详情</template>
            </el-menu-item>
            <el-menu-item index="3">
              <el-icon><DataLine /></el-icon>
              <template #title>测试报告详情</template>
            </el-menu-item>
            <el-menu-item index="4">
              <el-icon><Location /></el-icon>
              <template #title>代码变更详情</template>
            </el-menu-item>
            <el-menu-item index="5">
              <el-icon><setting /></el-icon>
              <template #title>个性化配置详情</template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <router-view />
          </el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
